// 1. 
//    react   18  
//    react-dom/client     18    createRoot 
//    javascript/XML  babel-preset-react 处理jsx 
// 2.  
// react.js   react 核心文件  包含了react diff 算法 虚拟DOM 模型 react事件机制  
// 提供创建组件的API  createClass Component  React.Component 

import React from "react"

// react-dom.js         封装了操作react 组件API  负责把虚拟DOM 渲染 render 成真实DOM
// ReactDOM.render()=17    createRoot.render=18 

// 3.  babel-preset-react 负责解析 jsx 代码 ,  js内的html代码解析出来返回给浏览器


// 4. 
//  ReactDOM.render(虚拟DOM,真实DOM)
//  ReactDOM.render(<Component/>,app);
//  React.createElement()   创建虚拟DOM 
//  createRoot.render()    18版本 


// 5. data-reactroot 表面当前元素是 该组件的顶层标签 
// 任何组件都只能有一个顶层标签  组件首字母必须大写

// 6. jsx 语法规则 
// 遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；
// 遇到代码块（以 { 开头），就用 JavaScript 规则解析

// 7. 注释   组件内部注释  
//  { /* <h1>{txt}</h1>  */ }




// 创建组件  component 

// 组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分

// 每个组件 能完成独立的功能的，都是独立的部分
// a. React.createClass   老版本   ES5  废弃  react@15  
// b. React.Component   新版本   ES6   class 类  extends 继承  React.Component 父类 
// c. 无状态组件    stateLess component   函数式组件   Hooks 

// 组件名首字母必须大写    任何组件都只有一个顶层标签  

// render 组件生命周期钩子函数   把虚拟DOM 读取出JS内存   然后等待渲染成真实DOM 

// 生命周期阶段  mount(载入)  update(更新) unmount(销毁)

// 自定义函数  handleClick  onClick={this.handleClick}

// 数据传递载体  组件通信  props(属性)   state(状态)=data

// 内联CSS 


export default class MyCpt extends React.Component {
    render() {
        return (
            <div>
                <h2>
                    MyCpt - 组件定义的规则
                </h2>
                <MyOne />
                <MyTwo />
                <MyApp />
                <MyFunc />
                <MyBase />
                <MyList />
            </div>
        )
    }
}

class MyOne extends Component {
    render() {
        return (
            <div>
                <h2> MyOne - MyOne- MyOne</h2>
                <p>
                    组件名首字母必须大写    任何组件都只有一个顶层标签
                </p>
            </div>
        )
    }
}

class MyTwo extends Component {
    render() {
        return (
            <div>
                <h2>MyTwo - MyTwo - MyTwo </h2>
                <p>
                    组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分
                </p>
            </div>
        )
    }
}

// React@15 
// const MyDemo =  React.createClass({
//     render(){
//         return (
//             <div>
//                 <h2> Hello = React </h2>
//             </div>
//         )
//     }
// })

const MyApp = () => {
    return (
        <div>
            <h2> MyApp - MyApp - MyApp</h2>
            <p>纯函数组件 </p>
        </div>
    )
}

function MyFunc() {
    return (
        <div>
            <h2>MyFunc - MyFunc - MyFunc </h2>
            <p> 生命周期阶段  mount(载入)  update(更新) unmount(销毁) </p>
        </div>
    )
}

class Person {

}

class Student extends Person {

}


// v-if 
// v-for
// v-bind
// v-on
// v-model

const flag = true
class MyBase extends Component {
    render() {
        return (
            <div>
                <h2>MyBase - MyBase - MyBase </h2>
                {
                    !flag ? <h2>明天我们都放假了... </h2> : <h2>明天我们都去千锋上课吧</h2>
                }
                {
                    flag && <h2>Hello Wh2214 -  yyds - daydayup</h2>
                }
                {
                    // flag ?? <h2>Hello Wh2214 -  yyds - daydayup</h2>
                }
            </div>
        )
    }
}

const list = ['Vue', "vue3", "Node", "Typescript", "React", "ReactHooks", '小程序']

class MyList extends Component {
    render() {
        return (
            <div>
                <h2>MyList - MyList - MyList </h2>
                <ul>
                    {
                        list.map((item, index) => (
                            <li key={index}>
                                {item}
                            </li>
                        ))
                    }
                </ul>
            </div>
        )
    }
}